<template>
	<view  class="item" :style="{transform: `translateX(${x}upx)`,}" @touchstart="move.slideStart"
		@touchmove.stop="move.slideMove" @touchend="move.slideEnd">
		<uni-badge class="uni-badge-left-margin" :text="notReadInfo" :is-dot="isMute" absolute="rightTop" size="small">
			<image @tap="sendChat" class="item__avavtar" :src="item.avatar" mode="aspectFit" />
		</uni-badge>
		<view class="item__left" @tap="sendChat">
			<view class="item__header">
				<text class="item__username">{{item.username}}</text>
				<text class="item__date">{{item.date}}</text>
			</view>
			<view class="item__footer">
				<text class="item__desc">{{item.desc}}</text>
				<text class="iconfont icon-shengyin" v-if="isMute"></text>
			</view>
		</view>
		<view class="item__remove" @tap="remove">删除</view>
	</view>
</template>

<script setup>
	import {slide} from '@/hooks/move.js';
	import {reactive, ref} from 'vue';
	import {navigate} from '@/hooks/navigate.js'
		
	const props = defineProps({
		item:{
			type:Object,
			required:true,
		}
	})
	const x = ref(0)

	// 多少消息未读
	const notReadInfo = ref((Math.random()*10)>>0)
	// 是否静音
	const isMute = ref(false) 
	/**
	 * 获取移动事件
	 */
	const move = slide((start,end)=>{
		if(end[0]-start[0]<-40){
			x.value = -100;
		}else if(end[0]-start[0]>40){
			x.value = 0;
		}
	})
	
	/**
	 * 删除自身
	 */
	function remove(){
		console.log("未开放完成")
	}
	
	
	/**
	 * 跳转到聊天页面
	 */
	function sendChat(e){
		navigate("/pages/chat-detail/chat-detail",{item:props.item})
	}
	
</script>

<style lang="scss" scoped>
	.item {
		position: relative;
		transition: .4s linear;
		// 40+20+80+x=750
		width: 851upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-bottom: 1upx solid #f5f5f5;
		gap: 20upx;
		padding: 0 20upx;

		&__avavtar {
			width: 80upx;
			height: 80upx;
			border-radius: 10upx;
			box-shadow: 1upx 1upx 1upx rgba(0, 0, 0, .05),
			-1upx -1upx 1upx rgba(0, 0, 0, .05);
		}

		&__left {
			width: 650upx;
			box-sizing: border-box;
			padding: 20upx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			gap: 8upx;

			.iconfont {
				font-size: 12upx;
				color: #999999;
			}
		}

		&__header,
		&__footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&__username {
			font-size: 30upx;
			font-family: "PingFang SC Medium";
		}

		&__date {
			font-size: 16upx;
			color: #999999;
		}

		&__desc {
			color: #999999;
			font-size: 20upx;
		}

		&__remove {
			width: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: red;
			height: 120upx;
			color: #fff;
			flex-shrink: 0;
		}

	}
</style>